<template>
  <div>
    <div class="box">
      <p
        v-for="(v,i) in list" :key="i" :class="actiove == i ?'Active' : ''"  @click="fn(i)" >{{v.tit}}</p>
    </div>
    <component :is="com"></component>
  </div>
</template>
<script>
import Producta from "com/mes/jinrong/producta.vue";
import Productb from "com/mes/jinrong/productb.vue";
export default {
  data() {
    return {
      com: Producta,
      actiove: 0,
      list: [{ tit: "推荐产品" }, { tit: "贝壳服务" }],
    };
  },
  methods: {
    fn(i) {
      if (i === 0) {
        this.com = Producta;
      }
      if (i === 1) {
        this.com = Productb;
      }
      this.actiove = i;
    },
  },
};
</script>
<style scoped>
.box {
  height: 60px;
  display: flex;
  line-height: 60px;
  padding: 0 20px;
}
.box p:nth-of-type(1) {
  margin-right: 20px;
}
 p {
  font-size: 14px;
  color: #999;
}
.Active {
  color: #3475f6 ;

}
</style>